<!-- 我的课程 -->
<template>
	<view class="courses-container">
		<!-- 顶部栏 -->
		<view class="header-bar">
			<text class="back-icon" @click="goBack">←</text>
			<text class="title">我的课程</text>
		</view>
		
		<!-- 课程列表 -->
		<view class="course-list">
			<view v-if="courses.length === 0" class="empty-state">
				<text>暂无课程</text>
			</view>
				<!-- <image class="course-image" :src="course.coverImage" mode="aspectFill"></image> -->
			<view v-else class="course-item" v-for="(course, index) in courses" :key="index" @click="goToCourseDetail(course)">
				<view class="course-info">
					<text class="course-title">{{course.courseName}}</text>
					<text class="course-desc">{{course.remark}}</text>
					<view class="course-progress">
						<progress :percent="course.progress" stroke-width="3" activeColor="#f45a1c" backgroundColor="#eee"/>
						<text class="progress-text">{{course.progress||0}}%</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/common/request.js';
	import {
		Platform,
		Storage_Key,
		CarSetting,
		timeslot
	} from "@/static/config.js"
	
	export default {
		data() {
			return {
				courses: []
			}
		},
		onLoad() {
			this.getMyCourses();
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			getMyCourses() {
				// 获取我的课程列表
				request({
					url: Platform.api_requestUrl + '/treatment/course_user_permisson/list',
					method: 'GET',
					data: {
						userId: this.userinfo?.userId||'',
						status: 'Y'
					},
				}).then(response => {
					if (response.code === 200) {
						this.courses = response.rows;
					} else {
						uni.showToast({
							title: '获取课程失败',
							icon: 'none'
						});
					}
				}).catch(error => {
					uni.showToast({
						title: '获取课程失败',
						icon: 'none'
					});
				});
			},
			goToCourseDetail(course) {
				uni.navigateTo({
					url: `/pages/course/detail?id=${course.courseId}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.courses-container {
		min-height: 100vh;
		background: #f5f5f5;
	}
	
	.header-bar {
		display: flex;
		align-items: center;
		height: 60px;
		background: #f45a1c;
		padding: 0 15px;
		
		.back-icon {
			color: #fff;
			font-size: 24px;
			margin-right: 15px;
		}
		
		.title {
			color: #fff;
			font-size: 18px;
			font-weight: bold;
		}
	}
	
	.course-list {
		padding: 15px;
	}
	
	.empty-state {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 200px;
		color: #999;
		font-size: 16px;
	}
	
	.course-item {
		background: #fff;
		border-radius: 8px;
		margin-bottom: 15px;
		overflow: hidden;
		box-shadow: 0 2px 6px rgba(0,0,0,0.05);
	}
	
	.course-image {
		width: 100%;
		height: 160px;
	}
	
	.course-info {
		padding: 15px;
	}
	
	.course-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 8px;
	}
	
	.course-desc {
		font-size: 14px;
		color: #666;
		margin-bottom: 12px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.course-progress {
		display: flex;
		align-items: center;
		
		progress {
			flex: 1;
			margin-right: 10px;
		}
		
		.progress-text {
			font-size: 12px;
			color: #f45a1c;
		}
	}
</style> 